<template>
    <div class="w_bg bd" style="margin-top:12px">
        <div class="strategy_head flexbox flexcenter flexbetween">
            <div class="font_16 color_01">
                数据详情
            </div>
            <div class="font_14 color_02">
                项目名称：{{$route.query.project_name}}
            </div>
        </div>
        <div class="revenue_count">
            <div class="revenue_item flex flexbox flexcenter flexbetween">
                <div class="revenue_title flexbox flexcenter">
                    总实际收入金额
                    <el-tooltip class="item" effect="dark" content="" placement="top">
                        <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                            【实际收入金额=金额*（上游收入比例-吐点比例）】的总和
                        </div>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                        </svg>
                    </el-tooltip>
                </div>
                <div class="revenue_num">{{brandData.countData.reality_amount?brandData.countData.reality_amount:"0.00"}}</div>
            </div>
        </div>
        <div class="table_box">
            <el-table :data="brandData.tableData" class="com_table" ref="straRef" height="700px">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="brandads_name" label="品牌名称"></el-table-column>
                <el-table-column prop="brandads_amount" label="金额">
                    <template slot-scope="scope">
                        ￥{{scope.row.brandads_amount}}
                    </template>
                </el-table-column>
                <el-table-column prop="upstream_ratio" label="上游收入比例">
                    <template slot-scope="scope">
                        {{scope.row.upstream_ratio}}%
                    </template>
                </el-table-column>
                <el-table-column prop="spit_ratio" label="吐点比例">
                    <template slot-scope="scope">
                        {{scope.row.spit_ratio}}%
                    </template>
                </el-table-column>
                <el-table-column prop="reality_amount" label="实际收入金额">
                    <template slot-scope="scope">
                        ￥{{scope.row.reality_amount}}
                    </template>
                </el-table-column>
                <el-table-column prop="push_date" label="上线日期"></el-table-column>
                <el-table-column prop="" label="操作" width="122" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="editBrand(scope.row)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter" v-if="brandData.total>0">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="brandData.page" :page-size="brandData.limit" :page-sizes="[20, 50, 100, 200]" :total="brandData.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: ["brandQuery", "brandData"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        editBrand(row) {
            this.$emit("editBrand", row);
        },
        // 每页显示多少条数据
        handleSizeChange(val) {
            this.brandQuery.limit = val;
            this.$emit("getBrandList", 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.brandQuery.setpage = val;
            this.$emit("getBrandList", val);
        },
    },
    components: {},
};
</script>


<style scoped>
.table_box {
    padding: 0 20px;
    margin-top: 12px;
}
.revenue_count {
    padding: 0 20px;
    gap: 12px;
}
.revenue_item {
    width: 326px;
    height: 56px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 6px;
    padding: 0 20px;
    box-sizing: border-box;
}
.revenue_title {
    font-size: 12px;
    color: #616c85;
}
.revenue_num {
    font-size: 16px;
    color: #17233d;
    font-family: D-DIN;
    font-weight: 700;
}
</style>
